<div class="panel panel-default panel-intro">
    {:build_heading()}

    <div class="panel-body">
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">报工详情</h3>
                    </div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-6">
                                <table class="table table-bordered">
                                    <tr>
                                        <th width="120">追溯码</th>
                                        <td>{$trace.trace_code}</td>
                                    </tr>
                                    <tr>
                                        <th>订单号</th>
                                        <td>{$trace.order_no}</td>
                                    </tr>
                                    <tr>
                                        <th>客户名称</th>
                                        <td>{$trace.customer_name}</td>
                                    </tr>
                                    <tr>
                                        <th>产品名称</th>
                                        <td>{$trace.product_name}</td>
                                    </tr>
                                    <tr>
                                        <th>产品型号</th>
                                        <td>{$trace.model_name}</td>
                                    </tr>
                                    <tr>
                                        <th>型号编码</th>
                                        <td>{$trace.model_code}</td>
                                    </tr>
                                    <tr>
                                        <th>工序名称</th>
                                        <td>{$trace.process_name}</td>
                                    </tr>
                                    <tr>
                                        <th>报工数量</th>
                                        <td>{$trace.quantity}</td>
                                    </tr>
                                    <tr>
                                        <th>产品编号</th>
                                        <td>{$trace.item_nos}</td>
                                    </tr>
                                    <tr>
                                        <th>提交员工</th>
                                        <td>{$trace.worker_name}</td>
                                    </tr>
                                    <tr>
                                        <th>审核员工</th>
                                        <td>{$trace.auditor_name}</td>
                                    </tr>
                                    <tr>
                                        <th>报工备注</th>
                                        <td>{$trace.remark}</td>
                                    </tr>
                                    <tr>
                                        <th>审核备注</th>
                                        <td>{$trace.audit_reason}</td>
                                    </tr>
                                    <tr>
                                        <th>审核时间</th>
                                        <td>{:date('Y-m-d H:i:s', $trace.audit_time)}</td>
                                    </tr>
                                    <tr>
                                        <th>工时</th>
                                        <td>{$trace.work_hours} 小时</td>
                                    </tr>
                                    <tr>
                                        <th>工资金额</th>
                                        <td>￥{$trace.wage}</td>
                                    </tr>
                                </table>
                            </div>
                            <div class="col-md-6">
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <h4 class="panel-title">产品审核文件</h4>
                                    </div>
                                    <div class="panel-body">
                                        {if condition="$trace.item_nos_array"}
                                            {volist name="trace.item_nos_array" id="itemNo"}
                                                <div class="panel panel-info" style="margin-bottom: 15px;">
                                                    <div class="panel-heading">
                                                        <h5 class="panel-title">产品编号：{$itemNo}</h5>
                                                    </div>
                                                    <div class="panel-body">
                                                        <div class="row">
                                                            <div class="col-md-6">
                                                                <p><strong>审核图片：</strong></p>
                                                                {if condition="isset($trace.item_media) && !empty($trace.item_media)"}
                                                                    {volist name="trace.item_media" id="itemMedia"}
                                                                        {if condition="$itemMedia.item_no == $itemNo && !empty($itemMedia.audit_images)"}
                                                                            <div class="row">
                                                                                {volist name="itemMedia.audit_images" id="image"}
                                                                                <div class="col-md-6 col-sm-6 col-xs-6" style="margin-bottom: 10px;">
                                                                                    <div class="thumbnail" style="margin-bottom: 5px;">
                                                                                        <img src="{$image.image_url}" alt="审核图片" style="width: 100%; height: 80px; object-fit: cover; cursor: pointer;" onclick="showImage('{$image.image_url}')">
                                                                                        <div class="caption" style="padding: 5px;">
                                                                                            <small class="text-muted">{:date('m-d H:i', $image.createtime)}</small>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                                {/volist}
                                                                            </div>
                                                                        {elseif condition="$itemMedia.item_no == $itemNo"}
                                                                            <div class="alert alert-info" style="font-size: 12px;">
                                                                                暂无审核图片
                                                                            </div>
                                                                        {/if}
                                                                    {/volist}
                                                                {else/}
                                                                    <div class="alert alert-info" style="font-size: 12px;">
                                                                        暂无审核图片
                                                                    </div>
                                                                {/if}
                                                            </div>
                                                            <div class="col-md-6">
                                                                <p><strong>审核视频：</strong></p>
                                                                {if condition="isset($trace.item_media) && !empty($trace.item_media)"}
                                                                    {volist name="trace.item_media" id="itemMedia"}
                                                                        {if condition="$itemMedia.item_no == $itemNo && !empty($itemMedia.audit_videos)"}
                                                                            <div class="row">
                                                                                {volist name="itemMedia.audit_videos" id="video"}
                                                                                <div class="col-md-12" style="margin-bottom: 10px;">
                                                                                    <div class="thumbnail" style="margin-bottom: 5px;">
                                                                                        <video controls style="width: 100%; height: 120px;">
                                                                                            <source src="{$video.image_url}" type="video/mp4">
                                                                                            您的浏览器不支持视频播放。
                                                                                        </video>
                                                                                        <div class="caption" style="padding: 5px;">
                                                                                            <small class="text-muted">{:date('m-d H:i', $video.createtime)}</small>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                                {/volist}
                                                                            </div>
                                                                        {elseif condition="$itemMedia.item_no == $itemNo"}
                                                                            <div class="alert alert-info" style="font-size: 12px;">
                                                                                暂无审核视频
                                                                            </div>
                                                                        {/if}
                                                                    {/volist}
                                                                {else/}
                                                                    <div class="alert alert-info" style="font-size: 12px;">
                                                                        暂无审核视频
                                                                    </div>
                                                                {/if}
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            {/volist}
                                        {else/}
                                            <div class="alert alert-warning">
                                                暂无产品编号信息
                                            </div>
                                        {/if}
                                        
                                        <!-- 普通报工图片 -->
                                        {if condition="isset($trace.report_images) && !empty($trace.report_images)"}
                                        <div class="panel panel-success" style="margin-top: 15px;">
                                            <div class="panel-heading">
                                                <h5 class="panel-title">报工图片</h5>
                                            </div>
                                            <div class="panel-body">
                                                <div class="row">
                                                    {volist name="trace.report_images" id="image"}
                                                    <div class="col-md-3 col-sm-4 col-xs-6" style="margin-bottom: 15px;">
                                                        <div class="thumbnail">
                                                            <img src="{$image.image_url}" alt="报工图片" style="width: 100%; height: 120px; object-fit: cover; cursor: pointer;" onclick="showImage('{$image.image_url}')">
                                                            <div class="caption">
                                                                <small class="text-muted">{:date('m-d H:i', $image.createtime)}</small>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    {/volist}
                                                </div>
                                            </div>
                                        </div>
                                        {/if}
                                        
                                        <hr>
                                        <p><strong>追溯页面：</strong></p>
                                        <a href="{:url('trace', ['id' => $trace.trace_code], false, true)}" target="_blank" class="btn btn-primary">
                                            <i class="fa fa-external-link"></i> 查看追溯页面
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function showImage(imageUrl) {
    // 创建模态框显示大图
    var modal = $('<div class="modal fade" tabindex="-1" role="dialog">' +
        '<div class="modal-dialog modal-lg" role="document">' +
        '<div class="modal-content">' +
        '<div class="modal-header">' +
        '<button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>' +
        '<h4 class="modal-title">图片预览</h4>' +
        '</div>' +
        '<div class="modal-body text-center">' +
        '<img src="' + imageUrl + '" style="max-width: 100%; max-height: 70vh;">' +
        '</div>' +
        '</div>' +
        '</div>' +
        '</div>');
    
    $('body').append(modal);
    modal.modal('show');
    
    // 模态框关闭后移除元素
    modal.on('hidden.bs.modal', function() {
        $(this).remove();
    });
}
</script>
